.evaluation-application-page {
  width: 100%;
  background: url('../images/evaluation/bg.png') no-repeat center top #fff;
  background-size: 100% auto;
  min-height: 100vh;
  overflow: hidden;
}

.evaluation-module {
  width: rpx(690);
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: rpx(20);
  margin: rpx(30) auto;
  overflow: hidden;
  .titles {
    @include flex;
    .title {
      height: rpx(50);
      line-height: rpx(50);
      text-align: center;
      background: #DEF2FF;
      border-radius: 0px 0px rpx(20) rpx(20);
      font-size: rpx(26);
      color: #3D6BDE;
      padding: 0 rpx(28);
      span {
        padding-left: rpx(20);
      }
    }
  }
}

.evaluation-module-1 {
  padding-top: rpx(138);
  .list {
    padding: rpx(30) 0 rpx(46);
    @include flex(row,center,space-around);
    .item {
      @include flex(column);
      position: relative;
      .checked {
        position: absolute;
        top: rpx(-4);
        right: rpx(-4);
      }
      .icon {
        width: rpx(134);
        height: rpx(134);
        border-radius: 50%;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .name {
        font-size: rpx(28);
        line-height: 1.1;
        margin-top: rpx(18);
        color: #555;
      }
      &.item-1 {
        .icon {
          border: 1px solid #d5e7ff;
        }
        .name {
          color: #6691FD;
        }
        &.active {
          .icon {
            border-color: #7eb8ff;
          }
        }
        .checked {
          width: rpx(38);
          height: rpx(38);
          border-radius: 50%;
          background: url('../images/evaluation/checked.png') no-repeat center #d5e7ff;
          background-size: 100% auto;
        }
      }
      &.item-2 {
        .icon {
          border: 1px solid #ffd5d6;
        }
        .name {
          color: #FF898C;
        }
        &.active {
          .icon {
            border-color: #FF898C;
          }
        }
        .checked {
          width: rpx(38);
          height: rpx(38);
          border-radius: 50%;
          background: url('../images/evaluation/checked.png') no-repeat center #ffd5d6;
          background-size: 100% auto;
        }
      }
    }
  }
  .form {
    @include flex(row,flex-start,center);
    padding-bottom: rpx(30);
    .left {
      font-size: rpx(30);
      font-weight: bold;
      color: #3D6BDE;
      width: rpx(210);
      margin-right: rpx(20);
      margin-top: rpx(-8);
      text-align: right;
      span {
        font-size: rpx(60);
        padding-right: rpx(22);
      }
    }
    .right {
      flex: 1;
      overflow: hidden;
      padding-right: rpx(56);
      box-sizing: border-box;
      .item {
        @include flex;
        margin-bottom: rpx(16);
        .label {
          font-size: rpx(22);
          width: rpx(112);
          color: #000000;
          white-space: nowrap;
          overflow: hidden;
        }
        input {
          flex: 1;
          overflow: hidden;
          height: rpx(50);
          line-height: 1.2;
          background: #EFF3FD;
          border-radius: rpx(10);
          text-align: center;
          font-size: rpx(22);
        }
      }
    }
  }
}

.evaluation-module-2 {
  .list {
    @include flex(row,flex-start,flex-start,wrap);
    padding: rpx(48) rpx(46) rpx(12);
    box-sizing: border-box;
    .item {
      width: calc((100% - 0.64rem) / 3);
      margin-right: rpx(32);
      height: rpx(72);
      border: 1px solid #BBBBBB;
      border-radius: rpx(36);
      box-sizing: border-box;
      @include flex;
      font-size: rpx(26);
      color: #3A3A3A;
      margin-bottom: rpx(34);
      &:nth-child(3n) {
        margin-right: 0;
      }
      &.active {
        border-color: #3D6BDE;
        color: #3D6BDE;
      }
    }
  }
}

.evaluation-module-3 {
  .wrapper {
    width: rpx(624);
    height: rpx(514);
    margin: rpx(32) auto rpx(38);
    @include flex;
    box-sizing: border-box;
    border: 1px solid #7394e8;
    border-radius: rpx(12);
    overflow: hidden;
    .left {
      width: rpx(150);
      height: 100%;
      border-right: 1px solid #7394e8;
      font-size: rpx(27);
      @include flex(column);
      box-sizing: border-box;
      .item {
        color: #6691FD;
        height: rpx(64);
        @include flex;
        &.active span {
          width: rpx(100);
          height: rpx(48);
          line-height: rpx(48);
          background-color: #3D6BDE;
          border-radius: rpx(10);
          color: #fff;
          text-align: center;
        }
      }
    }
    .right {
      flex: 1;
      height: 100%;
      box-sizing: border-box;
      background-color: #f0f4ff;
      overflow: auto;
      padding-left: rpx(20);
      padding-top: rpx(24);
      .item {
        float: left;
        width: rpx(120);
        height: rpx(52);
        line-height: rpx(52);
        margin-right: rpx(32);
        margin-top: rpx(14);
        margin-bottom: rpx(14);
        background: #FFFFFF;
        border-radius: rpx(10);
        font-size: rpx(22);
        color: #333333;
        background-color: #fff;
        text-align: center;
        &:nth-child(3n) {
          margin-right: 0;
        }
        &.active {
          background-color: #3D6BDE;
          color: #fff;
        }
      }
    }
  }
}

.evaluation-module-4 {
  .list {
    padding-top: rpx(54);
    padding-bottom: rpx(13);
    .item {
      width: rpx(584);
      height: rpx(74);
      line-height: rpx(70);
      border: rpx(2) solid #BBBBBB;
      border-radius: rpx(36);
      font-size: rpx(27);
      color: #3A3A3A;
      margin: 0 auto rpx(26);
      text-align: center;
      box-sizing: border-box;
      &.active {
        color: #3D6BDE;
        border-color: #3D6BDE;
        font-weight: bold;
      }
    }
  }
  .remarks {
    width: rpx(584);
    height: rpx(166);
    border: rpx(2) solid #BBBBBB;
    border-radius: rpx(10);
    margin: 0 auto rpx(47);
    box-sizing: border-box;
    overflow: hidden;
    @include flex(row,flex-start,center);
    .label {
      font-size: rpx(27);
      color: #3D6BDE;
      font-weight: bold;
      width: rpx(120);
      text-align: center;
      line-height: 1.1;
      padding: rpx(24) 0;
    }
    .txt {
      flex: 1;
      overflow: hidden;
      box-sizing: border-box;
      height: 100%;
      padding: rpx(20) 0;
      textarea {
        width: 100%;
        box-sizing: border-box;
        display: block;
        height: 100%;
        font-size: rpx(27);
        line-height: 1.4;
      }
    }
  }
}

.evaluation-module-5 {
  .list {
    width: rpx(610);
    overflow: hidden;
    margin: rpx(44) auto rpx(32);
    .item {
      @include flex;
      margin-bottom: rpx(30);
      
      border-radius: rpx(36);
      box-sizing: border-box;
      overflow: hidden;
      .left {
        width: rpx(290);
        height: rpx(74);
        line-height: rpx(74);
        background: #3D6BDE;
        border-radius: rpx(36);
        font-size: rpx(27);
        color: #fff;
        margin-right: rpx(-36);
        text-align: center;
      }
      .right {
        flex: 1;
        @include flex(row,center,flex-end);
        border: 1px dashed #6691FD;
        border-left: none;
        height: rpx(74);
        box-sizing: border-box;
        border-radius: 0 rpx(36) rpx(36) 0;
        .score {
          font-size: rpx(27);
          color: #3A3A3A;
        }
        input {
          width: rpx(142);
          height: rpx(44);
          background: #F0F4FF;
          border-radius: rpx(20);
          margin-right: rpx(20);
          text-align: center;
          line-height: 1.4;
          font-size: rpx(26);
        }
      }
    }
  }
  .needs {
    width: rpx(610);
    height: rpx(372);
    background: #3D6BDE;
    border-radius: rpx(20);
    @include flex(column);
    margin: auto;
    .item {
      width: rpx(524);
      height: rpx(74);
      line-height: rpx(70);
      font-size: rpx(26);
      color: #fff;
      text-align: center;
      border: rpx(2) dashed #FFFFFF;
      border-radius: rpx(36);
      margin: rpx(16) 0;
      box-sizing: border-box;
      &.active {
        background-color: #fff;
        color: #3D6BDE;
      }
    }
  }
  .btn {
    width: rpx(372);
    height: rpx(88);
    background: linear-gradient(0deg, #FFFFFF 0%, #000000 0%, #6691FD 0%, #1B54E2 100%);
    border-radius: rpx(44);
    font-size: rpx(29);
    font-weight: bold;
    line-height: rpx(88);
    text-align: center;
    color: #fff;
    margin: rpx(46) auto rpx(38);
  }
}
